<template>
  <div class="bar-echarts">
    <baseECharts :options="options"></baseECharts>
  </div>
</template>

<script>
import baseECharts from "@/components/baseEChart.vue";
export default {
  components: {
    baseECharts,
  },
  props: {
    barData: {
      type: Object,
      require: true,
    },
  },
  computed: {
    options() {
      return {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.barData.nameArray.name1,
            axisTick: {
              alignWithLabel: true,
            },
            //修改坐标轴文字大小颜色等
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            // X轴样式不显示
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            // y轴线条样式
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
                type: "solid",
              },
            },
            // y轴分割线样式
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            // 修改柱子的宽度
            barWidth: "35%",
            // data的数据是动态的，通过请求得到的
            data: this.barData.data1,
            itemStyle: {
              // 修改柱子的圆角
              barBorderRadius: 5,
            },
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.bar-echarts{
    width: 100%;
    height: 100%;
}
</style>
